<!DOCTYPE html>
<html lang="en">
<head>
    <title>退保审核管理</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/laypage.css">

    <script src="/js/vue/vue.min.js"></script>
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/laypage/laypage.js" charset="utf-8"></script>
    <script src="/js/layer/layer.js" charset="utf-8"></script>



</head>
<body>
<script src="/js/webSocket.js"></script>
<section id="container">
<#include "sider.ftl">  <#--引入头部和导航栏-->
    <section id="main-content">
        <section class="wrapper">
            <div class="table-agile-info">
                <div class="panel panel-default"  id="app">
                    <div class="panel-heading">退保审核管理</div>
                    <form class="form-inline bg-danger" role="form">
                        输入客户名、单号、操作员姓名
                        <div class="form-group">
                            <label class="sr-only" for="keyword"></label>
                            <input type="text" class="form-control" id="str" placeholder="关键字">
                        </div>
                        <button type="button" id="queryBtn" class="btn btn-success">查询</button>
                    </form>
                    <div>
                        <table class="table" ui-jq="footable" ui-options='{
                        "paging": {
                        "enabled": true},
                        "filtering": {
                        "enabled": true},
                        "sorting": {
                        "enabled": true}}'>
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>保单号</th>
                                <th>客户名称</th>
                                <th>联系方式</th>
                                <th>车牌号</th>
                                <th>购买时间</th>
                                <th>有效日期</th>
                                <th>是否缴费</th>
                                <th>支付方式</th>
                                <th>操作员</th>
                                <th>套餐类型</th>
                                <th>退保进度</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="active" v-for="(item,index) in result">
                                <td>{{index+1}}</td>
                                <td>{{item.oid}}</td>
                                <td>{{item.user.sname}}</td>
                                <td>{{item.user.sphone}}</td>
                                <td>{{item.cars.licenseNum}}</td>
                                <td>{{item.addtime}}</td>
                                <td>&nbsp;</td>
                                <td v-if="item.paystate=='1'">已缴费</td>
                                <td v-else>未缴费</td>

                                <td v-if="item.paymethod=='0'">未缴费</td>
                                <td v-else-if="item.paymethod=='1'">支付宝</td>
                                <td v-else-if="item.paymethod=='2'">微信</td>
                                <td v-else-if="item.paymethod=='3'">银行卡</td>
                                <td v-else-if="item.paymethod=='4'">现金</td>
                                <td>{{item.emp.empName}}</td>
                                <td>{{item.combo.combname}}</td>
                                <td v-if="item.ostate=='1'" style="color: orange">退保待审</td>
                                <td v-if="item.ostate=='2'" style="color: limegreen">退保成功</td>
                                <td v-if="item.ostate=='3'" style="color: red">退保失败</td>
                                <td v-if="item.ostate=='4'" style="color: red">退保成功</td>
                                <td><a href="#" @click="checkEvent(item.ouid,item.ostate)" id="a">审核</a>
                            </tr>
                            <tr>
                                <td colspan="11">
                                    <div id="pagenav"></div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>
       <#include "foot.ftl"><#--引入底部-->
    </section>
</section>
</body>
</html>
<script type="text/javascript" src="/js/vue/vue.min.js"></script>
<script type="text/javascript" src="/js/layer/layer.js" charset="utf-8"></script>
<script type="text/javascript" src="/js/laypage/laypage.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            result: []
        }
    });
    var getOrderPage = function (curr) {
        $.ajax({
            url: "/check/getBackOrder",
            type: "POST",
            dataType: "json",
            data: {
                pageNum: curr || 1,
                pageSize:4,
                str:$("#str").val()
            },
            success: function (data) {
                app.result = data.page;
                console.log(data.page);
                laypage({
                    cont: 'pagenav',
                    pages: data.totalPage,
                    skin: '#CD00CD',
                    first: '首页',
                    last: "末页",
                    curr: curr || 1,
                    jump: function (obj, first) {
                        if (!first) {
                            getOrderPage(obj.curr);
                        }
                    }
                });
            }
        })
    };
    getOrderPage();
    $("#queryBtn").click(function () {
        getOrderPage();
    });

    $("#str").keyup(function () {
        getOrderPage();
    })

    /*$(".getState").click(function () {
        var curr=curr||1;
        var ste=$(this).attr("id");
        getOrderPage(curr,ste);
    });*/

    var checkEvent=function (ouid,ostate) {
        if(ostate==2||ostate==3){
            layer.msg("已经审核过了",{icon:2});
            return;
            /*alert(caseState)*/
        }
        layer.confirm('是否通过？',{
                    btn:['通过','不通过','取消']
                },function () {
                    $.ajax({
                        type:'POST',
                        url:'/check/changeOrderState',
                        data:{
                            ouid:ouid,
                            ostate:2
                        },
                        success:function (msg) {
                            if (msg=="true"){
                                layer.msg('审核通过',{icon:6});
                                getOrderPage();
                            }else {
                                layer.msg('操作失败',{icon:2});
                                getOrderPage();
                            }
                        }
                    });
                },function () {
                    $.ajax({
                        type:'POST',
                        url:'/check/changeOrderState',
                        data:{
                            ouid:ouid,
                            ostate:3
                        },
                        success:function (msg) {
                            if(msg=="true"){
                                layer.msg('审核不通过',{icon:5});
                                getOrderPage();
                            }else{
                                layer.msg('操作失败',{icon:2});
                                getOrderPage();
                            }
                        }
                    });
                },function () {

                }
        );
    }
</script>